<template>
  <div>
    <div class="head">
      <div class="scale_box">
        <div class="scale_title">发卡规模：</div>
        <div class="scale_detail">
          <div class="detail_l">最大发卡规模：</div>
          <div v-if="!scalemideShow">
            <span class="num">{{ info.cardMoneyTotal }}</span>
            <span>万元</span>
          </div>
          <div class="detail_r" v-if="scalemideShow">
            <el-input placeholder="请输入内容" v-model="formInline.cardMoneyTotal"></el-input>
            <span class="spantxt">万元</span>
          </div>
        </div>
        <div class="scale_detail">
          <div class="detail_l">单张卡限额：</div>
          <div v-if="!scalemideShow">
            <span>记名卡</span>
            <span class="num2">{{ info.registeredCardLimit }}</span>
            <span class="spantxt">元</span>
          </div>
          <div class="detail_r" v-if="scalemideShow">
            <span>记名卡</span>
            <el-input placeholder="请输入内容" v-model="formInline.registeredCardLimit"></el-input>
            <span class="spantxt">元</span>
          </div>
          <div style="margin-left: 60px" v-if="!scalemideShow">
            <span>不记名卡</span>
            <span class="num2">{{ info.notRegisteredCardLimit }}</span>
            <span class="spantxt">元</span>
          </div>
          <div class="detail_r" v-if="scalemideShow">
            <span>不记名卡</span>
            <el-input placeholder="请输入内容" v-model="formInline.notRegisteredCardLimit"></el-input>
            <span class="spantxt">元</span>
          </div>
        </div>
        <div class="button_box">
          <el-button type="primary" @click="scaleMide" v-if="!scalemideShow">修改</el-button>
          <el-button @click="scalemideClose" v-if="scalemideShow">取消</el-button>
          <el-button type="primary" @click="scaleSumit" v-if="scalemideShow">保存</el-button>
        </div>
      </div>
    </div>
    <div class="head">
      <div class="scale_box">
        <div class="scale_title">银行存管与释放：</div>
        <div class="scale_detail">
          <div class="detail_l">存管比例：</div>
          <div v-if="!depositmideShow">
            <span class="num">{{ info.superviseRatio }}</span>
            <span>%</span>
          </div>
          <div class="detail_r" v-if="depositmideShow">
            <el-input placeholder="请输入内容" v-model="formInline.superviseRatio" @blur="BlurText($event)" maxlength="3">
            </el-input>
            <span class="spantxt">%</span>
          </div>
        </div>
        <div class="scale_detail">
          <div class="detail_l">存管释放规则：</div>
          <div v-if="!depositmideShow">
            <!-- <span>存管释放规则</span>
            <span class="num2">{{ info.initReleaseRatio }}</span>
            <span>%</span>
            <span>释放一次，</span> -->
            <span>消耗达</span>
            <span class="num2">{{ info.maxReleaseRatio }}</span>
            <span>%</span>
            <span>全部释放</span>
          </div>
          <div class="detail_r" v-if="depositmideShow">
            <!-- <span>存管释放规则：</span>
            <el-input
              placeholder="请输入内容"
              v-model="formInline.initReleaseRatio"
              @blur="BlurText2($event)"
              maxlength="3"
            ></el-input>
            <span>% 释放一次，</span> -->
            <span>消耗达</span>
            <el-input placeholder="请输入内容" v-model="formInline.maxReleaseRatio" @blur="BlurText3($event)" maxlength="3">
            </el-input>
            <span>% 全部释放</span>
          </div>
        </div>

        <div class="button_box">
          <el-button type="primary" v-if="!depositmideShow" @click="depositMide">修改</el-button>
          <el-button @click="depositClose" v-if="depositmideShow">取消</el-button>
          <el-button type="primary" v-if="depositmideShow" @click="depositSumit">保存</el-button>
        </div>
      </div>
    </div>
    <div class="head">
      <div class="scale_box">
        <div class="scale_title">预付卡流水</div>
        <el-form :inline="true" :model="cardData" class="demo-form-inline">
          <el-form-item label="卡类型：">
            <el-select v-model="cardData.customerCardType" placeholder="全部">
              <el-option v-for="item in cardTypeList" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="交易明细类型：">
            <el-select v-model="cardData.billType" placeholder="全部">
              <el-option v-for="item in billTypeList" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="交易时间：">
            <el-date-picker v-model="applyTime" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="会员手机号：">
            <el-input v-model="cardData.phoneNum" placeholder="请输入会员手机号"></el-input>
          </el-form-item>
          <el-form-item label="预付卡ID：">
            <el-input v-model="cardData.customerCardNo" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="reset">重置</el-button>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="listBox">
          <div class="listBox_head">
            <export-excel-button title="账单列表" action="/bg/merchant/data/CardBillList/export" :params="ExportParams" />
          </div>
          <ex-table ref="table" :loading="loading" :table-column="tableColumn" :table-data="tableData"
            :show-summary="true" :sumobject="sumobject" @pageSizeChange="handleSizeChange"
            @currentPageChange="handleCurrentChange">
            <template v-slot:member="{ scope }">
              <div class="slot_box">
                <img class="avatar_img" :src="scope.row.avatar" alt="" v-if="scope.row.avatar!=''" />
                <img class="avatar_img" src="../../../../static/avant.png" v-if="scope.row.avatar==''" alt="" />
                <div>{{ scope.row.nickName }}</div>
              </div>
            </template>
            <template v-slot:operate="{ scope }">
              <el-button @click="lookDetail(scope.row)">查看</el-button>
            </template>
          </ex-table>
        </div>
      </div>


    </div>
  </div>
</template>
<script>
  import {
    mapState
  } from "vuex";
  import {
    supervise,
    superviseMide,
    cardBillList,
    adminDict
  } from "@/api/merchants";
  import handlePageMixin from "@/mixins/handlePageMixin";
  import ExportExcelButton from "@/components/ExportExcelButton/index";
  export default {
    name: "ScaleDeposit",
    components: {
      ExportExcelButton,
    },
    mixins: [handlePageMixin],
    computed: {
      ...mapState({
        cardTypeList: function (state) {
          return state.common["asset_card_type"]; // 要取this的实例，只能用不同函数，不能用箭头函数
        },
      }),
      ExportParams() {
        const {
          id: ticketId
        } = this;
        const params = {
          ...this.pageOptions,
          ...this.cardData,
        };
        return params;
      },
    },
    data() {
      return {
        loading: false,
        scalemideShow: false,
        depositmideShow: false,
        id: "",
        info: {},
        sumobject: {},
        formInline: {
          cardMoneyTotal: "", //发卡总额
          registeredCardLimit: "", //记名卡限制金额
          notRegisteredCardLimit: "", //非记名卡限制金额
          superviseRatio: "", //预付消费监管比例（单位：百分比）
          initReleaseRatio: 0, //单卡监管金额初始释放比例（单位：百分比）
          maxReleaseRatio: "", //单卡监管金额最大释放比例（单位：百分比）
        },
        billTypeList: [
          // {id: '',value: '全部'},
          // {id: '1',value: '售卡'},
          // {id: '2',value: '卡余额消费'},
        ],
        applyTime: [],
        cardData: {
          merchantId: '', //商户id
          customerCardNo: '', //预付卡ID
          customerCardType: '', //卡类型
          billType: '', //交易明细类型（1 售卡 2 卡余额消费）
          startDate: '', //交易起始时间
          endDate: '', //交易结束时间
          phoneNum: '', //手机号
        },
        tableData: [],
        tableColumn: [{
            prop: "relevancyNo",
            label: "交易单号"
          },
          {
            prop: "transactionTime",
            label: "交易成功时间"
          },
          {
            prop: "customerCardNo",
            label: "预付卡ID"
          },
          {
            prop: "customerCardTypeDict",
            label: "卡类型"
          },
          {
            prop: "phoneNum",
            label: "手机号",
            width: 120
          },
          {
            prop: "billTypeDict",
            label: "交易明细类型",
            width: 120
          },
          {
            prop: "orderMoney",
            label: "交易金额",
            width: 120
          },
          {
            prop: "discountsMoney",
            label: "优惠",
            width: 120
          },
          {
            prop: "useCardMoney",
            label: "卡余额支付"
          },
          {
            prop: "giveUseCardMoney",
            label: "卡赠送支付"
          },
          {
            prop: "platformProcedureFee",
            label: "手续费｜推广费",
            width: 120
          },
          {
            prop: "practicalReceivedMoney",
            label: "实际收入",
            width: 120
          },
          {
            prop: "withdrawMoney",
            label: "卡内金额收入/支出",
            width: 120
          },
          {
            prop: "giveCardMoney",
            label: "卡内赠送收入/支出",
            width: 120
          },
          {
            prop: "freezeMoney",
            label: "卡内存管金额收入/支出",
            width: 120
          },
          {
            prop: "remark",
            label: "备注",
            width: 120
          },
        ],
      };
    },

    created() {
      let query = this.$route.query;
      this.id = query.id;
      this.cardData.merchantId = query.id;
      this.getTransactiontype()
      this.getDetail();
      this.getList();
      // this.getBalancedlist();
    },
    methods: {
      BlurText(e) {
        let boolean = new RegExp("^([1-9]|[1-9]\\d|100)$").test(e.target.value);
        if (!boolean) {
          this.$message.error("请输入1-100正整数");
          this.formInline.superviseRatio = ''
        }
      },
      BlurText2(e) {
        let boolean = new RegExp("^([1-9]|[1-9]\\d|100)$").test(e.target.value);
        if (!boolean) {
          this.$message.error("请输入1-100正整数");
          this.formInline.initReleaseRatio = ''
        }
      },
      BlurText3(e) {
        let boolean = new RegExp("^([1-9]|[1-9]\\d|100)$").test(e.target.value);
        if (!boolean) {
          this.$message.error("请输入1-100正整数");
          this.formInline.maxReleaseRatio = ''
        }
      },
      getTransactiontype() {
        //获取交易明细类型
        const params = {
          dictType: "merchant_card_bill_type",
        };
        adminDict(params).then((res) => {
          var arr = [{
            id: "",
            value: "全部",
          }, ];
          this.billTypeList = arr.concat(res.result[0].dictList);
        });
      },
      //获取信息
      getDetail() {
        console.log("this.id", this.id);
        supervise(this.id).then((res) => {
          this.info = res.result;
          this.formInline = res.result;
          // this.formInline.cardMoneyTotal = res.result.cardMoneyTotal;
          // this.formInline.registeredCardLimit = res.result.registeredCardLimit;
          // this.formInline.notRegisteredCardLimit = res.result.notRegisteredCardLimit;
          // this.formInline.superviseRatio = res.result.superviseRatio
          // this.formInline.initReleaseRatio = res.result.initReleaseRatio
          // this.formInline.maxReleaseRatio = res.result.maxReleaseRatio
        });
      },
      scalemideClose() {
        //取消
        this.getDetail()
        this.scalemideShow = false;

      },
      scaleMide() {
        //发卡规模修改
        this.scalemideShow = true;
      },
      scaleSumit() {
        //发卡规模保存
        console.log(this.formInline);
        var params = {
          ...this.formInline,
          type: 1,
          id: this.info.id,
        };
        superviseMide(params).then((res) => {
          this.$message({
            message: "修改成功",
            type: "success",
            duration: 1500,
          });
          setTimeout(() => {
            this.getDetail();
            this.scalemideShow = false;
          }, 1000);
        });
      },
      depositMide() {
        //存款与释放修改
        this.depositmideShow = true;
      },
      depositSumit() {
        //存款与释放保存
        var params = {
          ...this.formInline,
          type: 2,
          id: this.info.id,
        };
        superviseMide(params).then((res) => {
          this.$message({
            message: "修改成功",
            type: "success",
            duration: 1500,
          });
          setTimeout(() => {
            this.getDetail();
            this.depositmideShow = false;
          }, 1000);
        });
      },
      depositClose() {
        //取消
        this.getDetail()
        this.depositmideShow = false;
      },
      onSubmit() {
        //查询
        console.log('this.applyTime', this.applyTime);
        console.log(this.cardData);
        this.cardData.startDate = this.applyTime[0]
        this.cardData.endDate = this.applyTime[1]
        this.pageOptions.pageNum = 1
        this.$refs.table.pageOptions.pageNum = 1
        this.getList();
      },
      reset() {
        this.cardData.customerCardNo = ''
        this.cardData.customerCardType = ''
        this.cardData.billType = ''
        this.applyTime = []
        this.cardData.startDate = ''
        this.cardData.endDate = ''
        this.cardData.phoneNum = ''
        this.pageOptions.pageNum = 1
        this.$refs.table.pageOptions.pageNum = 1
        this.getList();
      },
      getList() {
        const params = {
          ...this.pageOptions,
          ...this.cardData,
        };
        this.loading = true;
        console.log('params', params)
        cardBillList(params)
          .then((res) => {
            console.log('res.result', res.result)
            const {
              page,
              beeMerchantCardBillTotalDTO
            } = res.result;
            this.tableData = page.records;
            this.sumobject = beeMerchantCardBillTotalDTO
            this.$refs.table.pageOptions.total = page.total;
          })
          .finally(() => {
            this.loading = false;
          });
      },
    },
  };

</script>
<style scoped>
  .head {
    display: flex;
    align-items: center;
    box-shadow: 0px 4px 12px 0px rgba(1, 41, 99, 0.06);
    border-radius: 8px;
    background-color: #ffffff;
    padding: 20px;
    margin-bottom: 20px;
  }

  .scale_box {
    padding: 0;
    width: 100%;
    color: #333;
    font-size: 15px;
  }

  .scale_title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .scale_detail {
    padding: 10px 20px;
    display: flex;
    align-items: center;
  }

  .detail_l {
    font-size: 15px;
    color: #333;
    margin-right: 6px;
    width: 120px;
    text-align: right;
  }

  .num {
    color: #ff9300;
    margin-right: 8px;
  }

  .num2 {
    color: #ff9300;
    margin: 8px;
  }

  .spantxt {
    width: 60px;
    margin-left: 8px;
  }

  .detail_r {
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #333;
  }

  .button_box {
    margin: 40px 0 0;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .detail_r .el-input--medium {
    margin: 0 10px;
  }

  .el-input--medium {
    width: 160px !important;
  }

  .listBox {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
    margin-top: 10px;
  }

  .listBox_head {
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-end;
  }

</style>
